<template>
  <div class='edit-address-page' v-show="addressInfo">
    <div class='nav-bar'>
      <van-nav-bar title='修改收货地址' left-text='' left-arrow @click-left='onClickLeft' />
    </div>
    <div class='edit-address-box'>
      <div v-if="setDefault" v-show="addressInfo">
        <van-address-edit :area-list='areaList' :address-info='addressInfo' :is-saving='false' show-delete @save='onSave' @delete='onDelete' />
      </div>
      <div v-else v-show="addressInfo">
        <van-address-edit :area-list='areaList' :address-info='addressInfo' :is-saving='false' show-set-default show-delete @save='onSave' @delete='onDelete' />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Area, AddressEdit, Toast } from 'vant'
import areaList from '#/common/js/area'
import { CODE, APIURI } from '#/common/js/apiConst'
Vue.use(AddressEdit).use(Area)
export default {
  data() {
    return {
      id: '',
      areaList,
      addressInfo: {},
      isDefault: false,
      setDefault: true
    }
  },
  created() {
    this.getDetail()
  },
  mounted() {
    this.changeCSS()
  },
  methods: {
    onClickLeft() {
      this.onReturn()
    },
    getDetail() {
      this.getId()
      if (this.id) {
        this.$axios
          .get(APIURI + '/address/show/' + this.id)
          .then(res => {
            res = res.data
            if (res.code === CODE) {
              let addressInfo = res.data
              this.addressInfo = this.changeForm(addressInfo)
              this.isDefault = this.addressInfo.is_default
              if (this.isDefault) {
                this.setDefault = true
              } else {
                this.setDefault = false
              }
              console.log(this.addressInfo)
            }
          })
          .catch(function(err) {
            console.log(err)
          })
      }
    },
    getId() {
      this.id = this.$route.query.id
    },
    onSave() {
      let param = JSON.parse(JSON.stringify(this.addressInfo))
      param = Object.assign(this.returnForm(param), {
        uid: '2'
      })
      param = this.serializeParam(param)
      this.$axios
        .post(APIURI + '/address/edit', param, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        .then(res => {
          res = res.data
          if (res.code === CODE) {
            Toast('保存成功')
            this.onReturn()
          }
        })
        .catch(function(err) {
          console.log(err)
        })
    },
    onDelete() {
      if (this.id) {
        this.$axios
          .get(APIURI + '/address/del/' + this.id)
          .then(res => {
            res = res.data
            if (res.code === CODE) {
              Toast('删除成功')
              this.onReturn()
            }
          })
          .catch(function(err) {
            console.log(err)
          })
      }
    },
    onReturn() {
      this.routeParam('/user/addresslist')
    },
    routeParam(url) {
      let source = this.$route.query.source
      if (source) {
        if (url.indexOf('?') !== -1) {
          this.$router.push({
            path: url + '&source=' + source
          })
        } else {
          this.$router.push({
            path: url + '?source=' + source
          })
        }
      } else {
        this.$router.push({
          path: url
        })
      }
    },
    changeForm(addressInfo) {
      addressInfo.tel = addressInfo.mobile
      addressInfo.address_detail = addressInfo.address
      addressInfo.province = addressInfo.area.split(' ')[0]
      addressInfo.city = addressInfo.area.split(' ')[1]
      addressInfo.county = addressInfo.area.split(' ')[2]
      addressInfo.is_default = addressInfo.stats === '1'
      addressInfo.area_code = addressInfo.code
      delete addressInfo.mobile
      delete addressInfo.address
      delete addressInfo.stats
      delete addressInfo.code

      return addressInfo
    },
    returnForm(addressInfo) {
      addressInfo.mobile = addressInfo.tel
      addressInfo.area =
        addressInfo.province + ' ' + addressInfo.city + ' ' + addressInfo.county
      addressInfo.address = addressInfo.address_detail
      addressInfo.stats = addressInfo.is_default ? '1' : '0'
      addressInfo.code = addressInfo.area_code
      delete addressInfo.tel
      delete addressInfo.province
      delete addressInfo.city
      delete addressInfo.county
      delete addressInfo.address_detail
      delete addressInfo.area_code
      delete addressInfo.is_default

      return addressInfo
    },
    serializeParam(param) {
      let serialize = ''
      for (let key in param) {
        serialize += key + '=' + param[key] + '&'
      }
      serialize = serialize.substr(0, serialize.length - 1)
      return serialize
    },
    changeCSS() {
      let addressLine = document.getElementsByClassName(
        'van-field--has-textarea'
      )[0]
      addressLine.classList.add('van-hairline--bottom')
    }
  }
}
</script>

<style lang='scss' scoped>
.nav-bar {
  margin-bottom: 10px;
}
</style>